<template>
    <div class="wrapper" v-if="msgStatus">
        <div class="popup-box">
            <div class="header">
                <div class="title">
                    提示
                </div>
                <div class="close" @click='close'>
                    X
                </div>
            </div>
            <div class="content">
                <p>{{msg}}</p>
            </div>
            <div class="btns">
                <button @click='sendRequest'>确定</button>
                <button class="white" @click='close'>取消</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        msgStatus:{
            default:false
        },
        msg:{
            type:String,
            default:`您确认删除嘛？`
        }
    },
    methods:{
        close(){
            this.$emit('handleMsgStatus',false)
        },
        sendRequest(){
            this.$emit('sendRequest')
        }
    }
}
</script>
<style lang="stylus" scoped>
    .wrapper 
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 2024;
        background-color rgba(0,0,0,.4)
        .popup-box
            position absolute 
            top 50% 
            left 50% 
            transform translate(-50% ,-50%)       
            display: inline-block;
            width: 420px;
            padding-bottom: 10px;
            vertical-align: middle;
            background-color: #fff;
            border-radius: 4px;
            border: 1px solid #ebeef5;
            font-size: 18px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            text-align: left;
            overflow: hidden;
            backface-visibility: hidden;
            .header 
                position: relative;
                padding: 15px 15px 10px; 
                .close 
                    position: absolute;
                    top: 15px;
                    right: 15px;
                    padding: 0;
                    border: none;
                    outline: none;
                    background: transparent;
                    font-size: 16px;
                    cursor: pointer;
                .title 
                    padding-left: 0;
                    margin-bottom: 0;
                    font-size: 18px;
                    line-height: 1;
                    color: #303133;
            .content
                position: relative;
                padding: 10px 15px;
                color: #606266;
                font-size: 16px;
            .btns
                padding: 15px 15px 0;
                text-align: right;
                button 
                    padding: 9px 15px;
                    font-size: 12px;
                    border-radius: 3px;
                    

</style>
